<template>
  <div>
    <p class="top_s">
      <router-link v-show="$route.name !== 'SwitchTest'" to="/Switchtest">
        <el-button type="primary"> 模式切换 </el-button> </router-link
      >&nbsp;&nbsp;
      <el-badge :value="infoNumber" class="item">
        <button
          :class="{ trans: xx }"
          class="el-icon-xiaoxi iconfont"
          @click="$router.push('/messagecenter')"
        ></button>
      </el-badge>

      &nbsp;&nbsp; <span>{{ dates }} &nbsp;{{ str }}</span> &nbsp; 用户：{{
        $store.state.users.userName
      }}
      <el-button type="primary" @click="close"> 注销 </el-button>
    </p>
    <el-dialog v-dialogDrag title="系统消息" :visible.sync="dialogVisible">
      <i class="el-icon-tishi iconfont tishi"></i>
      <div class="conten">
        <dd>
          <p>考试名</p>
          <h4>{{ examinationName }}</h4>
        </dd>
        <dd>
          <p>时间</p>
          <h4>{{ dateTime }}</h4>
        </dd>
        <dd>
          <p>设备号</p>
          <h4>{{ equipmentName }}</h4>
        </dd>
        <dd>
          <p>学生姓名</p>
          <h4>{{ studentName }}</h4>
        </dd>
        <dd>
          <p>消息</p>
          <h4>{{ message }} ！</h4>
        </dd>
      </div>
      <el-button class="btns" type="primary" @click="confirm"> 确定 </el-button>
    </el-dialog>
    <el-dialog
      title="本次考试信息"
      :visible.sync="ksInforVisible"
      class="ksinfor"
    >
      <li>
        <span class="name">名</span> 考试名称：
        <h2>20220104</h2>
      </li>
      <li>
        <span class="name">时</span>考试时间：
        <h2>{{ $store.state.usedTime }}</h2>
        分钟
      </li>
      <li>
        <span class="name">应</span>应到人数：
        <h2>45</h2>
        人
      </li>
      <li>
        <span class="name">实</span>实到人数：
        <h2>42</h2>
        人
      </li>
      <el-button @click="ksInforVisible = false"> 关闭 </el-button>
      <el-button
        type="primary"
        @click="$router.push({ name: 'Grade', params: { id: 123455 } })"
      >
        查看详情
      </el-button>
    </el-dialog>
  </div>
</template>
<script>
const synth = window.speechSynthesis;
const msg = new SpeechSynthesisUtterance();
// 上面是音频
// Audio
import { getUserName, updeteMessage } from "@/api";
export default {
  data() {
    return {
      dates: "",
      str: "",
      interval: null,
      dialogVisible: false,
      informationId: "", //id 点击确定时返回
      examinationName: "145456", // 考试名称
      equipmentName: "1号测试机", // 设备名称
      studentName: "张三", //学生名称
      dateTime: "2021-09-26 16:42:00", //时间
      message: "呼叫老师", // 消息内容
      ksInforVisible: false,
      showSwitch: true,
    };
  },
  computed: {
    infoNumber() {
      return this.$store.state.infoNumber;
    },
    xx() {
      return this.infoNumber < 1 ? false : true;
    },
    usedTime() {
      return this.$store.state.usedTime;
    },
  },
  watch: {
    dialogVisible(newValue, oldValue) {
      if (newValue !== oldValue) {
        this.queryInfo();
      }
    },
    usedTime: {
      handler(newVal) {
        newVal ? (this.ksInforVisible = true) : "";
      },
    },
  },
  mounted() {
    var date = new Date();
    var a = ["日", "一", "二", "三", "四", "五", "六"];
    var week = new Date().getDay();
    this.str = "星期" + a[week];
    this.dates = date.toJSON().split("T")[0];
    this.$nextTick(() => {
      this.queryInfo().then(() => {
        this.init();
      });
    });
  },
  destroyed() {
    clearInterval(this.interval);
  },

  methods: {
    // 语音播报的函数
    handleSpeak(text) {
      msg.text = text; // 文字内容:
      msg.lang = "zh-CN"; // 使用的语言:中文
      msg.volume = 2; // 声音音量：1
      msg.rate = 1; // 语速：1
      msg.pitch = 2; // 音高：1
      synth.speak(msg); // 播放
    },
    // 语音停止
    // handleStop(e) {
    //   msg.text = e;
    //   msg.lang = "zh-CN";
    //   synth.cancel(msg);
    // },
    close() {
      this.$confirm("确定注销用户吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "注销成功!",
          });
          localStorage.setItem("Authorization", "");
          this.$router.push("/login");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消!",
          });
        });
    },

    toggle() {
      this.dialogVisible = !this.dialogVisible;
    },
    // 查询消息
    queryInfo() {
      return new Promise((resolve) => {
        getUserName({ usersAccount: this.$store.state.name }).then((res) => {
          let rdata = res.data;
          this.$store.commit("setRole", rdata.usersRole);
          this.$store.commit("setusers", rdata);
          setTimeout(() => {
            this.queryInfo();
          }, 1000*60*2);
          if (res.data.usersInformation < 99) {
            this.$store.commit("setInfoNumber", rdata.usersInformation);
          } else {
            this.$store.commit("setInfoNumber", "99+");
          }
          resolve();
        });
      });
    },
    // init websockte
    init: function () {
      if (typeof WebSocket === "undefined") {
        alert("您的浏览器不支持webSocket!无法接收到实时消息!");
      } else {
        // 实例化socket
        this.socket = new WebSocket(
          "ws://117.158.147.214:6085/platform/identify/api/websocket/" +
            this.$store.state.users.usersId
        );
        // 监听socket连接
        this.socket.onopen = this.open;
        // 监听socket错误信息
        this.socket.onerror = this.error;
        // 监听socket消息
        this.socket.onmessage = this.getMessage;
        this.socket.onclose = this.websocketclose;
      }
    },
    open: function () {
      console.log("socket连接成功");
    },
    error: function () {
      console.log("连接错误");
      // this.reconnect();
    },
    getMessage: function (msg) {
      let data = JSON.parse(msg.data);
      console.log(data);
      this.informationId = data.informationId;
      this.examinationName = data.examinationName;
      this.equipmentName = data.equipmentName;
      this.studentName = data.studentName;
      this.dateTime = data.dateTime;
      this.message = data.message;
      this.dialogVisible = true;
      this.handleSpeak(
        `${data.equipmentName}, ${data.studentName},${data.message} `
      ); // 语音播报

      // Audio({args:`${data.equipmentName}, ${data.studentName},${data.message}`})
      setTimeout(() => {
        this.dialogVisible = false;
      }, 1000 * 30);
    },
    websocketclose() {
      console.log("断开连接");
      // this.reconnect();
    },
    send: function (data) {
      this.socket.send(JSON.stringify(data));
    },

    confirm() {
      updeteMessage({
        usersId: localStorage.getItem("usersId"),
        informationId: this.informationId,
      }).then((res) => {
        console.log(res);
        if (res.result_code == 200) {
          this.dialogVisible = false;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
div > p {
  display: block;
  float: right;
  line-height: 60px;
  font-size: 14px;
}
.item button {
  background: none;
  border: none;
  color: white;
  font-size: 16px;
}
.item .trans {
  animation: move 2s infinite ease-out;
}
@keyframes move {
  0% {
    color: red;
  }
  30% {
    color: white;
  }
  50% {
    color: red;
  }
  75% {
    color: white;
  }
  100% {
    color: red;
  }
}
.el-dialog span {
  padding-left: 15px;
  font-size: 18px;
}
.tishi {
  font-size: 110px;
  float: left;
  color: #fc703e;
  vertical-align: top;
  position: absolute;
  top: 41%;
  left: 50px;
}

.conten {
  text-align: left;
  width: 100%;
  padding-left: 200px;
  box-sizing: border-box;
  margin-bottom: 40px;
  dd {
    line-height: 1em;
    border: 1px solid #ddd;
    border-top: none;
    box-sizing: border-box;
    display: flex;
    color: #777;
    font-size: 20px;
    line-height: 1.8em;
    &:first-child {
      border-top: 1px solid #ddd;
    }
    & > p {
      display: inline-block;
      width: 85px;
      text-align: justify;
      text-align-last: justify;
      padding: 2px 10px;
      background-color: #eee;
    }
    h4 {
      padding: 2px 10px;
      padding-left: 15px;
      font-weight: 600;

      color: #fc703e;
      display: inline-block;
      max-width: 50%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}
// .conten::after {
//   content: "";
//   display: block;
//   width: 100%;
//   clear: both;
// }

.btns {
  position: absolute;
  bottom: 10px;
  right: 22px;
}

.el-button--medium {
  padding: 6px 10px;
  margin-left: 10px;
}
.el-badge {
  top: 3px;
}
.el-select {
  width: 110px;
  line-height: 25px;
  height: 25px;
  margin-right: 15px;
}
.el-input {
  line-height: 25px;
  height: 25px;
}
.ksinfor {
  li {
    background: #fff;
    margin-bottom: 10px;
    box-shadow: 0 2px 5px #0000002e;
    line-height: 3.5em;
    font-size: 18px;
    text-align: left;
    padding: 5px 15px;
    .name {
      margin-top: -15px;
      padding: 15px;
      border-radius: 50%;
      background: rgb(168, 168, 168);
      color: white;
      margin-right: 15px;
    }
    h2 {
      display: inline-block;
      color: #ed991b;
    }
    &:last-of-type {
      margin-bottom: 25px;
    }
  }
  // ::after{
  //   content: '';
  //   display: block;
  //   clear: both;
  // }
}
</style>
